import React, { useState, useEffect } from 'react'
import { useNavigate, useLocation } from "react-router-dom"
import { TabBar } from 'antd-mobile'
import { UnorderedListOutline, HistogramOutline, BillOutline, TeamOutline } from 'antd-mobile-icons'
import { PAGE } from '../../constants'

import './index.less'

const DEFAULT_KEY = PAGE.ANALYSIS.KEY

function BottomMenu() {

    const [activeKey, setActiveKey] = useState(DEFAULT_KEY)
    const navigate = useNavigate()
    const location = useLocation()

    useEffect(() => {
        setActiveKey(location.pathname.substring(1))
    }, [location.pathname])

    const onChange = (key) => {
        navigate(key)
    }

    return (
        <div className='bottom-menu-wrapper'>
            <TabBar activeKey={activeKey} onChange={onChange}>
                <TabBar.Item key={PAGE.RECORD.KEY} icon={<UnorderedListOutline />} title={PAGE.RECORD.NAME} />
                <TabBar.Item key={PAGE.ANALYSIS.KEY} icon={<HistogramOutline />} title={PAGE.ANALYSIS.NAME} />
                <TabBar.Item key={PAGE.CALCULATE.KEY} icon={<BillOutline />} title={PAGE.CALCULATE.NAME} />
                <TabBar.Item key={PAGE.ME.KEY} icon={<TeamOutline />} title={PAGE.ME.NAME} />
            </TabBar>
        </div>
    )
}

export default BottomMenu